<template>
  <div class="w-[1180px] mx-auto user-my-wrap">
    <div class="pt-40 nav-bar">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-container>
      <el-aside width="200px">
        <ul class="h-full">
          <template :key="tab.name" v-for="tab in pageTabs">
            <li
              :class="{ active: activeTab == tab.path }"
              class="text-[14px]"
              @click="toPath(tab)"
            >
              {{ tab.name }}
            </li>
          </template>
        </ul>
      </el-aside>
      <el-container>
        <el-main class="bg-[#fff] py-16 px-24">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'

const pageTabs = ref([
  {
    path: 'my',
    name: '账号信息',
  },
  {
    path: 'address',
    name: '用户地址',
  },
])
const router = new useRouter()
const route = new useRoute()
let activeTab = ref('my')
onMounted(()=>{
  activeTab.value = route.name
})
const toPath = (tab) => {
  activeTab.value = tab.path
  router.push(tab.path)
}
</script>

<style lang="scss" scoped>
.user-my-wrap {
    margin-bottom: 40px;

  .nav-bar {
    padding-bottom: 48px;
  }
  .el-container {
    .el-aside {
      ul {
        margin-right: 10px;
        background-color: #fff;
        padding: 12px 10px;
        li {
          display: flex;
          justify-content: center;
          align-items: center;
          list-style: none;
          height: 44px;
          border-radius: 4px;
          cursor: pointer;
          margin: 4px 0;
          &.active {
            background: linear-gradient(270deg, #e5ffef 0%, #fff6c9 100%);
          }
          &:hover {
            background-color: rgba(0, 0, 0, 0.06);
          }
        }
      }
    }
    .el-container {
      padding: 0;
      min-height: 500px;
      

      .el-main {
        border-radius: 6px;
        --el-main-padding: 16px 24px;
      }
    }
  }
}
</style>
